<template>
	<view class="recommend-page">
		<view class="search">
			<uv-search placeholder="请输入关键字" v-model="keyword" :showAction="true" @search="handSearch"
				@custom="handSearch"></uv-search>
		</view>
		<FilterBar @change="filterChange" />
		<common-list :isDataEmpty="tableData.length === 0" :status="status">
			<template #list>
				<view>
					<uv-checkbox-group v-model="checkboxValue" shape="circle">
						<view class="car-list">
							<view class="car-item" v-for="(item, index) in tableData" :key="index">
								<car-card :info="item" />
								<view class="check">
									<uv-checkbox :name="item.id" activeColor="#FE9502"></uv-checkbox>
								</view>
							</view>
						</view>
					</uv-checkbox-group>
				</view>
			</template>
		</common-list>
		<view class="submit">
			<button class="cu-btn" @click="handSubmit">确认推荐</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import {
		userList
	} from '@/hooks/userList.js'
	import {
		doList
	} from '@/apis/car.js'
	import {
		doTui
	} from '@/apis/demand.js'
	import CommonList from '@/components/commonList/list.vue'
	import FilterBar from '@/components/FilterBar.vue'
	import CarCard from '@/components/card/CarCard.vue'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')
	const checkboxValue = ref([])
	let filterForm = {}
	const filterChange = (e) => {
		filterForm = e
		onRefresh()
		checkboxValue.value = []
	}
	const handSearch = () => {
		queryForm.value.productName = keyword.value
		onRefresh()
		checkboxValue.value = []
	}

	const tuijianForm = ref({
		id: '',
		productId: []
	})
	let loading = false
	const handSubmit = async () => {
		if (checkboxValue.value.length === 0) {
			uni.$uv.toast('请至少选择一个车型')
			return
		}
		tuijianForm.value.productId = uni.$uv.deepClone(checkboxValue.value)
		if (loading) return
		loading = true
		await doTui(tuijianForm.value)
		uni.$uv.toast('推荐成功')
		setTimeout(() => {
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('tuiEvent');
			setTimeout(() => {
				$back()
			}, 500)
		}, 500)
	}
	/**
	 * 
	 * 列表数据
	 * */
	const getApi = async (params) => {
		if (!params.productName) {
			delete params.productName
		}
		const res = await doList({
			...params,
			...filterForm
		})
		res.records = res.records.map(el => {
			el.platform = JSON.parse(el.platform)
			return el
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {
			isShelves: true,
			productName: ''
		}
	})

	onPullDownRefresh(() => {
		onRefresh()
		checkboxValue.value = []
	})
	onReachBottom(() => {
		onBottom()
	})
	onLoad(async (e) => {
		tuijianForm.value.id = e.id
		onRefresh()
		checkboxValue.value = []
	})
</script>

<style lang="scss" scoped>
	.recommend-page {
		.search {
			position: relative;
			z-index: 101;
			padding: 0 24rpx;
			background-color: #fff;
		}

		.car-list {
			margin-top: 30rpx;
			padding: 20rpx 24rpx;
			position: relative;
			width: 750rpx;
			padding-bottom: 200rpx;

			.car-item {
				position: relative;
				width: 100%;

				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.check {
					position: absolute;
					top: 60rpx;
					right: 20rpx;
				}
			}
		}

		.submit {
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 30rpx;
			width: 750rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
			bottom: calc(env(safe-area-inset-bottom) + 30rpx);

			.cu-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				width: 694rpx;
				height: 104rpx;
				background-color: #FFC434;
				border-radius: 24rpx;
			}
		}
	}
</style>